<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>项目管理</title>
		<link href="css/main.css" rel="stylesheet">
   		<link href="css/responsive.css" rel="stylesheet">
   		<link href="css/paginate.css" rel="stylesheet">
		<link href="css/projects-manage.css" rel="stylesheet">
		<script src="js/jquery-1.9.1.min.js"></script>
		<script>
       		$(function(){
       			
		       	//项目导航收起、展开
		       	(function(){
		       		var len=$("[data-toggle='fold']").length;
		       		var ph=$("#parentItem").innerHeight();
		       		var oh=$("#ownItem").innerHeight();
		       		$("[data-toggle='fold']").parent().css("overflow","hidden");
		       		if(len>1){
			       		for(var i=0; i<len; i++){
			       			if(i==0){
			       				$("[data-toggle='fold']").eq(i).find(".iconfold").addClass("rotate");
			       			}
			       			else{
			       				$("[data-toggle='fold']").eq(i).parent().css({height:'51px'});
			       			}
			       		}
			       	}
		       		else{
			       		$("[data-toggle='fold']").find(".iconfold").addClass("rotate");
			       	}
			       	
		       		$(".vc-projects").on("click",function(){ slideToggle("#parentItem",ph); });
		       		
		       		$(".personer-projects").on("click",function(){ slideToggle("#ownItem",oh); });
		       		
		       		//折叠切换函数
		       		function slideToggle(el,h){
		       			var val=$(el).height();
			       		if(val>51) {
			       			$(el).animate({height:'51px',overflow:'hidden'},500);
			       			$(el).find(".iconfold").removeClass("rotate");
			       		}
			       		else {
			       			$(el).animate({height:h+'px'},500);
			       			$(el).find(".iconfold").addClass("rotate");
			       		}
		       		}
		       })();
       		})
        </script>
	</head>
	<body class="sticky-header left-side-collapsed">
		<jsp:include page="left-slide.jsp" />
		<div class="main-content">
			<jsp:include page="header-start.jsp" />
			<div class="main">
				<!--左侧边项目导航栏-->
				<div class="left-aside">
					<div class="aside-wrapper">
						<div class="left-bar">
							<div class="left-bar-item" id="parentItem">
					    		<div class="vc-projects item" data-toggle="fold">
					    			<i class="fileicon-copy iconfont icon-loucengpingmiantu"></i>微投网项目
					    			<span class="iconfold iconfont icon-zuoyoujiantouicon10024"></span>
					    		</div>
					    		<a class="btn-block item allItem">全部（0）</a>
				            	<a class="btn-block item progress-key">
				            		<i class="progress-name" data-value='0'>
				            			<i class="iconfont icon-rongyu"></i>未处理
				            		</i>（0）
				            		<span>
				            			<i class="btn-tinge edit-progress" data-toggle="modal" data-target="#change-progress-modal">修改</i>
				            			<i class="iconfont icon-shanchu del-progress btn-tinge"></i>
				            		</span>
				            	</a>
						    </div>
						    <a class="btn-block new-progress text-center" data-toggle="modal" data-target="#add-progress-modal"><i class="iconfont icon-tianjia"></i>&nbsp;新增进度</a>
						</div>
					</div>
				</div>
				<!--右侧边内容-->
                <div class="right-box text-center">
                	<div class="right-header text-left clearfix">
						<div class="pull-left title"><span>项目管理</span></div>
						<div class="pull-left date">
							<input type="text" name="search" id="search" placeholder="输入项目名/团队信息"><i class="icon-search iconfont icon-sousuo-sousuo"></i>
						</div>
						<div class="pull-left clearfix">
							<a class="btn-block invitation btn-active text-center" onclick="createPro()"><i class="iconfont icon-tianjia"></i>&nbsp;添加</a>
						</div>
					</div>
					<!--条件筛选-->
					<div class="condition-filter text-left">
						<div class="area filter-item clearfix" id="area">
							<div class="pull-left"><b>地&nbsp;&nbsp;&nbsp;区：</b></div>
								<span class="active" data-value='0'>全部</span>
									<span data-value='0'>北京</span>
								<i id="manage" data-toggle="modal" data-target="#area-modal">管理<small class="iconfont icon-control-arr-copy-copy"></small></i>
						</div>
						<div class="business filter-item clearfix" id="field">
							<div class="pull-left"><b>行&nbsp;&nbsp;&nbsp;业：</b></div>
								<span class="active" data-value='0'>全部</span>
								<span data-value='0'>互联网金融</span>
								<i id="manage" data-toggle="modal" data-target="#business-modal">管理<small class="iconfont icon-control-arr-copy-copy"></small></i>
						</div>
						<div class="round filter-item clearfix" id="round">
							<div class="pull-left"><b>轮&nbsp;&nbsp;&nbsp;次：</b></div>
								<span class="active" data-value='0'>全部</span>
								<span data-value='1'>种子轮</span>
						</div>
						<div class="priority filter-item clearfix" id="unit">
							<div class="pull-left"><b>优先级：</b></div>
								<span class="active" data-value='0'>全部</span>
								<span data-value='1'>优先</span>
						</div>
					</div>
					<!--地区管理模态框-->
					<div class="modal fade" id="area-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content text-center">
								<div class="modal-header">
									<h4 class="modal-title text-center">地区管理</h4>
								</div>
								<div class="modal-body">
									<div class="hot text-left">
										<div class="hot-title">热门地区</div>
										<div class="hot-bd">
											<div class="hot-item clearfix" data-liffect="bounceIn"></div>
											<a class="change-batch pull-right">换一批</a>
										</div>
									</div>
					            	<div class="item clearfix">
					            		<input type="text" id="search-area" placeholder="请输入关键字搜索">
					            	</div>
					            	<div id="select-area" class="item clearfix text-left">
					            	</div>
					            </div>
					            <div class="modal-footer">
					            	<div class="selected clearfix">
					            		<span class="handing pull-left">已选择：</span>
					            			<span class="pull-left"><i class="item-name" data-value="0">北京</i><i class="iconfont icon-shanchu del"></i></span>
					            	</div>
					                <button type="button" class="btn btn-default cancel" data-dismiss="modal">关闭</button>
					                <button type="button" class="btn btn-primary confirm">保存</button>
					            </div>
							</div>
						</div>
					</div>
					<!--行业管理模态框-->
					<div class="modal fade" id="business-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content text-center">
								<div class="modal-header">
									<h4 class="modal-title text-center">行业管理</h4>
								</div>
								<div class="modal-body">
									<div class="hot text-left">
										<div class="hot-title">热门行业</div>
										<div class="hot-bd">
											<div class="hot-item clearfix" data-liffect="bounceIn">
											</div>
											<a class="change-batch pull-right">换一批</a>
										</div>
									</div>
					            </div>
					            <div class="modal-footer">
					            	<div class="selected clearfix">
					            		<span class="handing pull-left">已选择：</span>
					            			<span class="pull-left"><i class="item-name" data-value="1">人工智能</i><i class="iconfont icon-shanchu del"></i></span>
					            	</div>
					                <button type="button" class="btn btn-default cancel" data-dismiss="modal">关闭</button>
					                <button type="button" class="btn btn-primary confirm">保存</button>
					            </div>
							</div>
						</div>
					</div>
					<!--正文内容-->
					<div class="content">
						<div class="container projects">
							<div class="row" id="dataList">
								<!--<div class='pro-null'>
									<div>
										<img src='images/center003.png' />
										<p>暂无项目</p>
									</div>
								</div>-->
								<div class="projects-item col-sm-12 col-md-6 col-lg-4" data-value="0">
									<div class="item-body bg-white clearfix">
										<span class="delPro iconfont icon-shanchu2" title="删除项目"></span>
										<div class="item clearfix">
											<a href="#" target="_blank">
												<div class="item-logo pull-left">
													<img src="images/min_logo.jpg"/>
													<!--<div class="first-word">项目名称首字</div>--> 
												</div>
											</a>
											<a  class="project-item-name pull-left" href="#" target="_blank">项目名称</a>
										</div>
										<div class="row icon-group">
											<div class="col-xs-4 no-padding text-left"><i class="iconfont icon-diqu"></i>地区</div>
											<div class="col-xs-4 no-padding text-center"><i class="iconfont icon-shuju"></i>轮次</div>
											<div class="col-xs-4 no-padding text-right"><i class="iconfont icon-shuju1"></i>融资金额</div>
										</div>
									</div>
									<div class="item-footer" style="padding:0 15px;">
										<div class="row bg-white" style="padding:15px 0;">
											<!--属性data-value存放项目id-->
										   <div class="col-xs-4 text-left userProgress_flag" data-value='0'>
										   		<span data-value='0' class="btn-progress" data-toggle="modal" data-target="#now-progress-modal">进度</span>
										   </div>
										   <div class="col-xs-4 text-center unit_flag" data-value='0'>
										     <span data-value='1' class="btn-priority" data-toggle="modal" data-target="#now-priority-modal">优先级</span>
										   </div>
										   <div class="col-xs-4 text-right follow_flag" data-value='${pro.id }'>
										   	<span class="btn-follow" data-toggle="modal" data-target="#current-follow-modal">跟进人</span>
										   </div>
										</div>
									</div>
								</div>
							</div>
							<!--分页-->
							<!--pagination start-->
							<div id="pagination"></div>
							<!--pagination end-->
						</div>
					</div>
                </div>
			</div>
		</div>
		
		<jsp:include page="modal.jsp" />
		
		<script src="js/jquery.nicescroll.js"></script>
        <script src="js/main.js"></script>
	    <script src="js/bootstrap.min.js"></script>
	    <script src="js/jquery.paginate.js"></script>
	    <script src="js/project-manager-left.js"></script>
	    <script src="js/projects-manager.js"></script>
	    <script>
       		$(function(){
				
				(function(){
					/*---------------------------------------------
					 * 创建标签组（tagGroups）对象原型。
					 * 参数对象obj中属性的含义：
					 * 1、el为触发更改标签内容的元素
					 * 2、receiver为接收标签的元素（一般为这些标签的父元素）
					 * 3、count为标签的数量
					 * 4、data为数据源
					 ---------------------------------------------*/
					var tagGroups=function(obj){
						//基本参数
						this.el=obj.el;
						this.receiver=obj.receiver;
						this.count=0;
						this.num=obj.count;
						this.data=obj.data;
						
						//初始化函数
						this.init=function(){
							var len,html="";
							len=(this.count+1)*this.num;
							len=len<this.data.length? len : this.data.length;
							for(var i=this.count*this.num; i<len;i++){
								html+="<span data-value="+this.data[i].id+">"+this.data[i].name+"</span>";
							}
							$(this.receiver).html(html);
						    //循环显示
						    this.count=len<this.data.length? (this.count+1) : 0;
						};
						
						//切换函数
						this.change=function(){
							var that=this;
							$(that.el).click(function(){
								that.init();
							});
						};
						
						//执行
						this.init();
						this.change();
					};
					
					/*热门地区管理*/
					
					//热门地区数据
	       			var hotArea=[
						{id:1,name:"北京"},
						{id:2,name:"上海"},
						{id:3,name:"广州"},
						{id:4,name:"深圳"},
						{id:5,name:"杭州"},
						{id:6,name:"厦门"},
						{id:17,name:"西安"},
						{id:19,name:"成都"},
						{id:20,name:"武汉"},
						{id:26,name:"苏州"},
						{id:9,name:"无锡"},
						{id:8,name:"南京"},
						{id:18,name:"重庆"},
						{id:14,name:"天津"},
						{id:21,name:"长沙"},
						{id:11,name:"济南"},
						{id:12,name:"青岛"},
						{id:22,name:"佛山"},
						{id:10,name:"合肥"},
						{id:15,name:"大连"},
						{id:25,name:"贵阳"},
						{id:9,name:"昆明"},
					];
					
					//热门地区
					var hotAreaGroups=new tagGroups({
						el:"#area-modal .change-batch",
						receiver:"#area-modal .hot-item",
						count:13,
						data:hotArea
					});
					
					/*热门行业管理*/
					//热门行业数据
					var hotBusiness=[
						{id:1,name:"人工智能"},
						{id:2,name:"新零售"},
						{id:3,name:"医疗健康"},
						{id:4,name:"教育"},
						{id:5,name:"智能硬件"},
						{id:6,name:"消费升级"},
						{id:7,name:"区块链"},
						{id:8,name:"共享经济"},
						{id:9,name:"泛娱乐"},
						{id:10,name:"电商"},
						{id:11,name:"物流"},
						{id:12,name:"旅游"},
						{id:13,name:"餐饮"},
						{id:14,name:"互联网金融"},
						{id:15,name:"体育运动"},
						{id:16,name:"社交"},
						{id:17,name:"本地生活"},
						{id:18,name:"交通出行"},
						{id:19,name:"企业服务"},
						{id:20,name:"房地产"},
						{id:21,name:"农业"},
					];
					
					//热门地区
					var hotBusinessGroups=new tagGroups({
						el:"#business-modal .change-batch",
						receiver:"#business-modal .hot-item",
						count:13,
						data:hotBusiness
					});

				})();
	
       		});
       </script>
	</body>
</html>
